<template>
  <div class="wrapper">
    <div class="limits">
      <el-form label-width="150px">
        <div style="margin-bottom: 50px;">
          <div v-for="item in authorityList1" :key="item.id">
            <el-form-item :label="item.pcAuthorityBelongName+'：'">
              <div class="select-btn" @click="selectDingUsers(item, 300)"><span><i class="el-icon-plus"></i></span>添加</div>
              <div v-for="(ids, index) in item.idsArr" :key="ids">
                <div class="select-btn" style="padding: 0;" @click="delMember(item, index)">{{item.namesArr[index]}}<div class="del" v-if="hasAuthority">移除</div></div>
              </div>
            </el-form-item>
          </div>
        </div>
        <div style="margin-bottom: 50px;">
          <el-form-item label="班组：" style="margin-bottom: 0;">
            <el-button type="text" @click="addOrEditGroup(false)"><i class="el-icon-plus"></i><span>添加班组</span></el-button>
          </el-form-item>
          <div v-for="item in groupList" :key="item.id">
            <el-form-item style="margin-bottom: 0;">
              <div><el-button type="text" @click="addOrEditGroup(item)">{{item.pcAuthorityBelongName}}：</el-button></div>
              <div class="select-btn" @click="selectDingUsers(item, 300)"><span><i class="el-icon-plus"></i></span>添加</div>
              <div v-for="(ids, index) in item.idsArr" :key="ids">
                <div class="select-btn" style="padding: 0;" @click="delMember(item, index)">{{item.namesArr[index]}}<div class="del" v-if="hasAuthority">移除</div></div>
              </div>
            </el-form-item>
          </div>
        </div>
        <div>
          <el-form-item label="执行项权限：" style="margin-bottom: 0;"></el-form-item>
          <el-form-item>
            <div v-for="(item, idx) in authorityList2" :key="item.id">
              <div v-if="!authorityList2[idx - 1] || item.pcAuthorityBelongId !== authorityList2[idx - 1].pcAuthorityBelongId">{{item.pcAuthorityBelongName}}计薪-设置</div>
              <div v-for="user in executor" :key="user.type">
                <div v-if="user.type===item.pcAuthorityDatatype">
                  <el-form-item :label="(item.pcAuthorityBelongId==='1293102120648929281' ? user.timeName : user.name) +'：'">
                    <div class="select-btn" @click="selectDingUsers(item, 300)"><span><i class="el-icon-plus"></i></span>添加</div>
                    <div v-for="(ids, index) in item.idsArr" :key="ids">
                      <div class="select-btn" style="padding: 0;" @click="delMember(item, index)">{{item.namesArr[index]}}<div class="del" v-if="hasAuthority">移除</div></div>
                    </div>
                  </el-form-item>
                </div>
              </div>
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <el-dialog :title="!form.id ? '新增班组' : '编辑班组'" :visible.sync="dialogVisible" width="600px">
      <el-form label-width="80px" label-position="left">
        <el-form-item label="班组名称">
          <span style="color: red; position:absolute; left: -90px;">*</span>
          <el-input v-model="form.pcAuthorityBelongName" placeholder="请输入班组名称"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" style="display: flex; justify-content: space-between;">
        <div>
          <el-button size="mini" v-if="form.id" @click="delGroup">删除</el-button>
        </div>
        <div>
          <el-button @click="dialogVisible = false" size="mini">取消</el-button>
          <el-button type="primary" @click="submitForm" size="mini">提交</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import dingMixin from  '@/mixins/ding'
import formUtil from '@/utils/formUtil'
export default {
  data () {
    return {
      dialogVisible: false,
      authorityList1: [],
      authorityList2: [],
      executor: [{type: '0', name: '观察者'},{type: '1', name: '管理员'},{type: '2', name: '品质审核', timeName: '部门主管'},{type: '3', name: '签收人员', timeName: '制造中心'},{type: '4', name: 'ERP录入', timeName: '薪酬专员'},{type: '5', name: '抄送人员', timeName: '抄送人员'},{type: '6', name: '申请人'},{type: '7', name: '生产计划管理者'},{type: '8', timeName: '计时申请人'}],
      groupList: [],
      form: {
        pcAuthorityBelongId: '',
        pcAuthorityBelongName: '',
        pcAuthorityDatatype: '',
        pcAuthorityUsersId: '',
        pcAuthorityUsersName: '',
        idsArr: [],
        namesArr: [],
      },
      authorityAsd: {}
    };
  },
  components: {},
  mounted () {
    this.getAuthorityAsd();
    this.getAuthorityList();
  },
  mixins: [dingMixin],
  computed: {
    hasAuthority() {
      return this.authorityAsd.userLevel === '1'
    }
  },
  methods: {
    async getAuthorityAsd() {
      this.authorityAsd = await this.$httpN.postB('pc/authority/asd')
    },
    async getAuthorityList() {
      let list = await this.$httpN.postB('pc/authority/list');
      list.forEach(item => {
        if(item.pcAuthorityUsersId !== '') {
          item.idsArr = item.pcAuthorityUsersId.split(",")
          item.namesArr = item.pcAuthorityUsersName.split(",")
        } else {
          item.idsArr = []
          item.namesArr = []
        }
      })
      this.authorityList1 = list.filter(item => {
        return item.pcAuthorityDatatype === '0' || item.pcAuthorityDatatype === '1' || item.pcAuthorityDatatype === '7'
      })
      this.authorityList2 = list.filter(item => {
        return item.pcAuthorityDatatype === '2' || item.pcAuthorityDatatype === '3' || item.pcAuthorityDatatype === '4' || item.pcAuthorityDatatype === '5' || item.pcAuthorityDatatype === '8'
      })
      this.groupList = list.filter(item => {
        return item.pcAuthorityDatatype === '6'
      })
    },
    selectDingUsers(authorityData, num){
      if(!this.hasAuthority) return
      this.complexPicker(num, [], authorityData.idsArr).then((data)=>{
        authorityData.idsArr = data.map(item => item.emplId);
        authorityData.namesArr = data.map(item => item.name)
        authorityData.pcAuthorityUsersId = authorityData.idsArr.join(',');
        authorityData.pcAuthorityUsersName = authorityData.namesArr.join(',')
        this.submitData(authorityData)
      })
    },
    delMember(authorityData, idx) {
      if(!this.hasAuthority) return
      authorityData.idsArr.splice(idx,1); 
      authorityData.namesArr.splice(idx,1); 
      authorityData.pcAuthorityUsersId = authorityData.idsArr.join(',');
      authorityData.pcAuthorityUsersName = authorityData.namesArr.join(',')
      this.submitData(authorityData)
    },
    async submitData(authorityData) {
      if(!await this.$httpN.postB('pc/authority/update', authorityData)) return
      this.getAuthorityList();
      formUtil.submitSuccess('保存成功');
    },
    async addOrEditGroup(data) {
      if(!this.hasAuthority) return
      formUtil.resetData(this.form);
      this.dialogVisible = true;
      if(!data) {
        this.form.pcAuthorityDatatype = '6';
      } else {
        this.form = JSON.parse(JSON.stringify(data));
      }
    },
    async submitForm() {
      if(!this.form.pcAuthorityBelongName) return this.$message.error('请输入班组名称');
      if(!await this.$httpN.postB( !this.form.id ? 'pc/authority/save' : 'pc/authority/update', this.form)) return
      this.getAuthorityList();
      formUtil.submitSuccess('保存成功');
      this.dialogVisible = false;
    },
    async delGroup() {
      formUtil.submitConfirm('请问您是否确定删除该班组？', async ()=> {
        if(!await this.$httpN.postB('pc/authority/delete', {ids: this.form.id})) return;
        formUtil.submitSuccess('删除成功');
        this.getAuthorityList();
        this.dialogVisible = false;
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.wrapper {
  height: 100%;
  .limits {
    height: 100%;
    padding: 20px 0;
    overflow: auto;
    .select-btn{
      float:left;
      font-weight: normal;
      margin-right: 5px;
      margin-bottom: 10px;
      width: 80px;
      height: 28px;
      border-radius: 30px;
      background: #FAFAFA;
      border: 1px solid #ECECEC;
      position: relative;
      padding-left: 21px;
      line-height: 28px;
      color: #7982A7;
      font-size: 12px;
      text-align: center;
      cursor: pointer;
      span{
        position: absolute;
        top: 1px;
        left: 1px;
        display:block;
        height: 24px;
        width: 24px;
        background: #CACACA;
        color: white;
        border-radius: 50%;
        text-align: center;
        line-height: 24px;
        img{
          width: 24px;
          height: 24px;
          border-radius: 50%;
        }
      }
      .del{
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 30px;
        color: white;
        text-align: center;
        background:rgba(130, 130, 130, 0.9);
        display: none;
      }
      &:hover{
        .del, .close{
          display: block;
        }
      }
    }
  }
}
</style>